<script lang="jsx">
import { roleServer } from '@/api'
import CRUD from '@/components/CRUD/index.vue'
import PermissionTree from './components/PermissionTree.vue'
export default {
  components: {
    CRUD,
  },
  setup() {
    const columns = [
      { label: '编号', prop: 'role_id' },
      { label: '角色名称', prop: 'name' },
      {
        label: '权限',
        prop: 'permission_list',
        render: (row) => <span>{row.permission_list.map((item) => item.title).join('、')}</span>,
      },
    ]
    const createForm = [
      {
        label: '角色名称',
        key: 'name',
        type: 'input',
        required: true,
        props: { placeholder: '请输入角色名称' },
      },
      { label: '权限', key: 'permission_id_list', type: 'custom', render: PermissionTree },
    ]
    return () => (
      <CRUD
        title="角色"
        rawKey="role_id"
        no-page
        server={roleServer}
        columns={columns}
        createForm={createForm}
        editForm={createForm}
        afterGetData={(data) => {
          data.forEach((item) => {
            item.permission_id_list = item.permission_list.map((item) => item.name)
          })
          return data
        }}
      ></CRUD>
    )
  },
}
</script>
